/*
    Document   : menu
    Created on : 14 Oct, 2013, 12:54:28 PM
    Author     : Saptarshi Debnath (saptarshi.devnath@gmail.com)
    Description:
        Purpose of the stylesheet follows.
*/

.homepage .mainMenu{
    width: 50%;
    margin: 0 auto;
    position: relative;
    font-size: 2.5vw;
}

.subpage .mainMenu{
    width: 15%;
    position: relative;
    font-size: 1vw;
    margin-left: 0;
    cursor: pointer;
}

.mainMenu .link{
    cursor: pointer;
    width: 50%;
    padding-bottom: 50%;
    position: relative;
    animation:makeOpaque 1s;
    -webkit-animation:makeOpaque 1s; /* Safari and Chrome */
}

.mainMenu .link > p{
    position: absolute;
}

.mainMenu .link#pageid-home{
    background-image: url("../images/logo/abm.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 70% 70%;
    left: 25.5%;
    position: absolute;
    top: 24%;
    z-index: 1;
    font-family: 'Courgette', cursive;
    border-radius: 100%;
}

.mainMenu .link#pageid-home p{
    margin-left: 26%;
    margin-top: 47%;
    width: 10%;
}

.mainMenu .link#pageid-hobby-motorcycle{
    border-radius: 100% 0% 0% 0%;
    background: radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0) 35%, black 35%, #60B3EA 40%,    #000000 65%, #8fc800 70%, #8fc800 100%);
}
.mainMenu .link#pageid-hobby-motorcycle p,
.mainMenu .link#pageid-hobby-photography p,
.mainMenu .link#pageid-blog p,
.mainMenu .link#pageid-resume p{
    margin-left: 21%;
    margin-top: 42%;
}

.mainMenu .link#pageid-hobby-motorcycle p{
    transform:rotate(-50deg);
    -webkit-transform:rotate(-50deg);
}

.mainMenu .link#pageid-hobby-photography p{
    transform:rotate(50deg);
    -webkit-transform:rotate(50deg);
}

.mainMenu .link#pageid-blog p{
    transform:rotate(50deg);
    -webkit-transform:rotate(50deg);
}

.mainMenu .link#pageid-resume p{
    transform:rotate(-50deg);
    -webkit-transform:rotate(-50deg);
}

.mainMenu .link#pageid-hobby-photography {
    background: radial-gradient(circle at 0 100% , rgba(255, 255, 255, 0) 35%, black 35%, #60B3EA 40%,   #000000 65%, #8fc800 70%, #8fc800 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 0 100% 0 0;
    margin-left: 49.8%;
    margin-top: -50%;
}
.mainMenu #pageid-blog.link {
    background: radial-gradient(circle at 100% 0 , rgba(255, 255, 255, 0) 35%,  black 35%, #60B3EA 40%,    #000000 65%, #8fc800 70%, #8fc800 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 0 0 0 100%;
}

.mainMenu #pageid-resume.link {
    background: radial-gradient(circle at 0 0 , rgba(255, 255, 255, 0) 35%, black 35%, #60B3EA 40%,  #000000 65%, #8fc800 70%, #8fc800 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 0 0 100% 0;
    margin-left: 49.8%;
    float: left;
}
.mainMenu .menu .link:hover{
    animation:makeTransparent 1s;
    -webkit-animation:makeTransparent 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}


@keyframes makeTransparent
{
    from {opacity:1.0;}
    to {opacity:0.5;}
}

@-webkit-keyframes makeTransparent
{
    from {opacity:1.0;}
    to {opacity:0.5;}
}


@keyframes makeOpaque
{
    from {opacity:0.5;}
    to {opacity:1.0;}
}

@-webkit-keyframes makeOpaque
{
    from {opacity:0.5;}
    to {opacity:1.0;}
}